Amplify UI の Authenticator コンポーネント利用時に、サインアウト処理を追加する

こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。

Amplify UIにはAuthenticatorコンポーネントが用意されており、該当コンポーネントを利用することでサインアウト処理の容易に記述することができます。

一方で、サインアウト時にいくつか追加で処理を加えたかったので、実際に対応をしてみました。

前提

フレームワークは「Next.js」、言語は「TypeScript」を前提とします。

シンプルな実装のケース

公式ドキュメントのサンプルコードにもあるとおり、以下のように実装することでシンプルなサインイン・サインアウトの実装は終わりです。

import { Amplify } from 'aws-amplify';

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>こんにちは、 {user.username} さん</h1>
          <button onClick={signOut}>サインアウト</button>
        </main>
      )}
    </Authenticator>
  );
}

ここではサインイン後に「サインアウト」ボタンをクリックすることで、認証情報がクリアされ、サインイン画面が再度表示されます。

追加でやりたいこと

ここで、サインアウト時に追加で以下をやりたいと思います。

• セッションをクリアしたい
• アプリ内で設定したCookieを削除したい
• ブラウザのパスをルート / に戻したい

サインアウト処理を追加したケース

上記のような処理を追加したい場合は、単純に独自にイベントハンドラを定義して利用するだけで対応できます。

import { Amplify } from 'aws-amplify'

import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
import { useRouter } from 'next/router'

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() {
  const router = useRouter()

  const handleSignOut = (signOut) => {
    // AmplifyのSignout処理
    signOut()

    // セッションとCookieの削除
    sessionStorage.clear()
    document.cookie = 'foobar=; max-age=0'

    // ブラウザのURL強制書き換え
    router.replace('/')
  }

  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>こんにちは、 {user.username} さん</h1>
          <button onClick={() => handleSignOut(signOut)}>サインアウト</button>
        </main>
      )}
    </Authenticator>
  )
}

ここではhandleSignOutというイベントハンドラを作成して呼び出すように修正しています。このイベントハンドラ内で必要な処理を書いているだけとなります。

当初はCustomization | Amplify UI for Reactに記載がある「Override Function Calls」のようにserviceを利用して実装するのかなと思ったのですが、サインアウトについては特に該当のserviceはなく、単純にイベントハンドラで対応すれば良いようです。

なお、今回は簡易なサンプルなのでCookieの削除は直接値を指定していますが、以下のように汎用的にしてもよさそうです。

const clearCookieVal = (key: string) => {
  document.cookie = key + "=; max-age=0";
};

まとめ

以上、Amplify UI の Authenticator コンポーネント利用時に、サインアウト処理を追加してみました。

こちらは初歩的な実装だけで対応できましたが、意外とサンプルが見つからなかったのでエントリにしてみました。

どなたかのお役に立てば幸いです。それでは！